<template>
  <div>
    <div
      style="width: 100%; height: 100%; text-align: center"
      class="student-div"
      v-if="loading"
    >
      <img src="./../img/banner.png" style="width: 100%" alt="" />
      <div v-if="!isTested">
        <div class="home-title cursdor flex" style="text-align: left">
          <img src="./../img/icon.png" alt="" /><span
            >{{ userInfo.userName }}同学请开始您的测评</span
          >
        </div>
        <div class="project-name">{{ projectList[0].projectName }}</div>
        <div class="project-img">
          <!-- <img :src="projectList[0].classesName" alt="" /> -->
          <el-image
            style="height: 100%"
            :src="projectList[0].classesName || indexpng"
            :fit="contain"
          ></el-image>
        </div>
        <div class="direction">
          <div>指导语：</div>
          <!-- {{ projectList[0].accessRemark || "无" }} -->
          <div class="html" v-html="projectList[0].accessRemark"></div>
        </div>
        <div class="button-div">
          <el-button type="primary" @click="goToTestDetails"
            >立即测评</el-button
          >
        </div>
      </div>
      <div v-else class="title">
        <img class="none-img" src="./../img/鸿康LOGO@2x.png" alt="" />
        <div>您暂无可测评，祝您身体健康，学习进步！</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "@/router/axios.js";
import indexpng from "./../index.png";
import { geGaugetype, geMeasureList } from "@/api/test";
export default {
  data() {
    return {
      projectList: [],
      contain: "contain",
      indexpng,
      userInfo: {},
      gaugetype: [],
      isTested: true,
      loading: false,
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("saber-userInfo")).content;
    geGaugetype().then((res) => {
      this.gaugetype = res.data.data;

      res.data.data.forEach((item) => {
        if (
          item.projectGaugeTypeId ==
          "000000_1630328417981_103f22dccae64d2884546ac86f434187"
        ) {
          geMeasureList(1, 100, {
            gaugeTypeId: item.projectGaugeTypeId,
            tenantId: this.userInfo.tenantId,
            status: 1,
          }).then((res) => {
            this.projectList = res.data.data.records || [];

            if (this.projectList.length > 0) this.getIsTested();
          });
        }
      });
    });
  },
  methods: {
    goToTestDetails() {
      this.$router.push({
        name: "心理测评详情",
        query: { projectId: this.projectList[0].projectId },
      });
    },
    getIsTested() {
      let userId = this.userInfo.userId;
      let projectId = this.projectList[0].projectId;
      axios
        .get(`/api/blade-measure/measure/userprojectgauge/page`, {
          params: {
            current: 1,
            size: 500,
            includeId: userId,
            projectId,
          },
        })
        .then((res) => {
          if (res.data.data.records.length > 0) {
            this.isTested = true;
          } else {
            this.isTested = false;
          }

          this.loading = true;
        });
    },
  },
};
</script>


<style lang="scss" scoped>
.student-div {
  .project-name {
    padding: 5px 0;
  }

  .home-title {
    font-size: 16px;
    font-weight: bold;
  }

  .flex {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    padding: 10px 0;

    span {
      padding-left: 5px;
    }
  }

  .cursdor {
    color: rgb(64, 158, 255);
  }

  .project-img {
    height: 10vw;
    margin-top: 20px;
  }

  .direction {
    width: 70%;
    margin-top: 10px;
    text-align: left;

    margin: 20px auto;

    > .html {
      text-indent: 32px;
    }
  }

  .title {
    display: inline-block;
    font-size: 18px;
    text-align: center;
    padding: 30px 0;

    .none-img {
      width: 180px;
    }
  }
  .button-div {
    text-align: center;
  }
}
</style>